<template>
  <div class="digitalEmployee-mobile">
    <div class="digitalEmployee-mobile-banner">
      <div class="digitalEmployee-mobile-banner-info">
        <div class="digitalEmployee-mobile-banner-info-desc">
          <h2>智企AI数字员工</h2>
          <p><span>AIGC时代企业专属数字人员工</span></p>
        </div>
        <div class="digitalEmployee-mobile-banner-info-btn">
          <vs-button @click="openInfoDialog">咨询了解</vs-button>
        </div>
      </div>
      <div class="digitalEmployee-mobile-banner-img"
        ><img
          src="https://static.pdwl.net/jituan/images/mobile/digitalEmployee/banner.png"
          alt=""
      /></div>
    </div>
    <div class="digitalEmployee-mobile-ai">
      <div class="digitalEmployee-mobile-title dark">
        <h3>人工智能时代</h3>
        <h5>每一家企业都需要一个数字员工</h5>
      </div>
    </div>
    <div class="digitalEmployee-mobile-host">
      <div class="digitalEmployee-mobile-title dark">
        <h3>智企数字主播</h3>
        <p>您专属的企业数字主播，卖货+获客轻松搞定</p>
      </div>
      <div class="digitalEmployee-mobile-host-body">
        <div
          v-for="(item, idx) in hostArr"
          :key="idx"
          class="digitalEmployee-mobile-host-body-item"
        >
          <div class="digitalEmployee-mobile-host-body-item-img">
            <p>{{ item.title }}</p>
            <img :src="item.img" alt="" />
          </div>
        </div>
      </div>
    </div>
    <div class="digitalEmployee-mobile-marketing">
      <div class="digitalEmployee-mobile-title dark">
        <h3>智企营销专家</h3>
        <p>您专属的短视频全平台营销获客专家</p>
      </div>
      <div class="digitalEmployee-mobile-marketing-body">
        <div
          v-for="(item, idx) in marketingArr"
          :key="idx"
          class="digitalEmployee-mobile-marketing-body-item"
        >
          <p>{{ item }}</p>
        </div>
      </div>
      <div class="digitalEmployee-mobile-marketing-desc">
        <img
          src="https://static.pdwl.net/jituan/images/mobile/digitalEmployee/marketing_desc.png"
          alt=""
        />
      </div>
    </div>
    <div class="digitalEmployee-mobile-helper">
      <div class="digitalEmployee-mobile-title dark">
        <h3>智企万能助手</h3>
        <p>您身边的万能助理，无所不知，无所不晓!</p>
      </div>
      <div class="digitalEmployee-mobile-helper-body">
        <div
          v-for="(item, idx) in helperArr"
          :key="idx"
          class="digitalEmployee-mobile-helper-body-item"
        >
          <p>{{ item }}</p>
        </div>
      </div>
      <div class="digitalEmployee-mobile-helper-desc">
        <img
          src="https://static.pdwl.net/jituan/images/mobile/digitalEmployee/helper_desc.png"
          alt=""
        />
      </div>
    </div>
    <div class="digitalEmployee-mobile-case">
      <div class="digitalEmployee-mobile-title dark">
        <h3>企业成功案例</h3>
        <p
          >品达6年，已累计帮助数万家企业进行数字化转型升级，提质增效，获得长足的发展</p
        >
      </div>
      <div class="swiper-container digitalEmployee-mobile-case-body">
        <div class="swiper-wrapper">
          <div
            class="swiper-slide flex_cen digitalEmployee-mobile-case-body-item"
            v-for="(item, idx) in caseArr"
            :key="idx"
          >
            <h4>{{ item.title }}</h4>
            <p>行业：{{ item.industry }}</p>
            <img :src="item.url" alt="" />
            <div class="digitalEmployee-mobile-case-body-item-desc">{{
              item.desc
            }}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="digitalEmployee-mobile-join">
      <div class="digitalEmployee-mobile-title dark">
        <h3>合作流程</h3>
        <p>品质保障，助企腾达</p>
      </div>
      <div class="digitalEmployee-mobile-join-body">
        <div
          v-for="(item, idx) in joinArr"
          :key="idx"
          class="digitalEmployee-mobile-join-body-item"
        >
          <div class="digitalEmployee-mobile-join-body-item-l">
            <img :src="item.src" />
            <p>{{ item.title }}</p>
          </div>
          <div
            v-if="idx < joinArr.length - 1"
            class="digitalEmployee-mobile-join-body-item-r"
          >
            <img
              src="https://static.pdwl.net/jituan/images/mobile/digitalEmployee/join_arrow.png"
            />
          </div>
        </div>
      </div>
    </div>
    <Footer></Footer>
  </div>
</template>
<script>
import Swiper from 'swiper';
import 'swiper/dist/css/swiper.min.css';
import Footer from '@/components/footer/index.vue';
export default {
  components: { Footer },
  data() {
    return {
      hostArr: [
        {
          title: '真人形象+声音克隆',
          img: 'https://static.pdwl.net/jituan/images/mobile/digitalEmployee/host_1.png',
        },
        {
          title: '数字人7*24小时不间断直播',
          img: 'https://static.pdwl.net/jituan/images/mobile/digitalEmployee/host_2.png',
        },
        {
          title: '数字人口播视频一键生成',
          img: 'https://static.pdwl.net/jituan/images/mobile/digitalEmployee/host_3.png',
        },
        {
          title: '直播间实时互动',
          img: 'https://static.pdwl.net/jituan/images/mobile/digitalEmployee/host_4.png',
        },
        {
          title: '多平台多场景直播',
          img: 'https://static.pdwl.net/jituan/images/mobile/digitalEmployee/host_5.png',
        },
      ],
      marketingArr: [
        '多平台矩阵账号管理',
        'AI智能化视频创作',
        '一键视频全平台发布',
        '多维度客户数据统计',
      ],
      helperArr: [
        '人机智能对话交互',
        '高效搜索，替代搜索引擎',
        '文案、合同、朋友圈轻松撰写',
        '100+专业助理角色',
      ],
      caseArr: [
        {
          title: '金春工业自动化科技有限公司 ',
          desc: '金春工业自动化科技有限公司，品达集团牛视短视频营销系统使用企业，2022年3月25日开始使用牛视工厂版。 系统通过企业号运营、AI智能剪辑、智能发布、流量扶持、全媒体运营、AI智能触客等营销方式，截止目前，该企业账号已在抖音800W的企业账号中打败了95.6%的账号。主页访问量1462.6w，新增粉丝共计36942人，粉丝数量达到1648w，牛视为该公司解决了营销难、推广难、获客难、视频制作难等营销痛点，让更多意向客户了解到金春工业成型机的功能、性能，实现了业绩突破，达成了短视频营销目标。 ',
          url: 'https://static.pdwl.net/jituan/images/digitalEmployee/icon10.png',
          industry: '传统制造-机械设',
        },
        {
          title: '格莱天姿木饰面同色一体  ',
          desc: '格莱天姿木饰面自2021年11月使用牛视系统以来，系统通过企业号运营、AI智能剪辑、智能发布、流量扶持、全媒体运营、AI智能触客等营销方式。截止目前，该账号主页访问量1577w，新增粉丝共计16540人，粉丝数量达到948w，牛视为该公司解决了营销、推广、获客、视频制作等营销痛点。视频的高曝光量让更多意向客户了解到该企业的相关信息，高排名数量让高意向客户精准搜索到该企业，牛视智能营销获客系统给该企业带来众多精准客户，助力企业业绩大幅提升。',
          url: 'https://static.pdwl.net/jituan/images/digitalEmployee/icon10.png',
          industry: '传统制造-建材家装',
        },
        {
          title: '临沂领杰包装有限公司 ',
          desc: '领杰包装有限公司，自使用牛视系统以来，系统通过企业号运营、AI智能剪辑、智能发布、流量扶持、全媒体运营、AI智能触客等营销方式。截止目前，该账号主页访问量3001.7w，新增粉丝共计9541人，粉丝数量达到1621w，牛视为该公司解决了营销、推广、获客、视频制作等营销痛点。牛视是一套真正的高效率、低成本、效果好、一站式精细化企业号运营平台，助力企业做好短视频营销，提升企业业绩 ',
          url: 'https://static.pdwl.net/jituan/images/digitalEmployee/icon10.png',
          industry: '传统制造-包装印刷',
        },
      ],
      joinArr: [
        {
          title: '在线咨询',
          src: 'https://static.pdwl.net/jituan/images/mobile/digitalEmployee/join_1.png',
        },
        {
          title: '需求沟通',
          src: 'https://static.pdwl.net/jituan/images/mobile/digitalEmployee/join_2.png',
        },
        {
          title: '签约合作',
          src: 'https://static.pdwl.net/jituan/images/mobile/digitalEmployee/join_3.png',
        },
        {
          title: '系统培训',
          src: 'https://static.pdwl.net/jituan/images/mobile/digitalEmployee/join_4.png',
        },
        {
          title: '售后跟踪',
          src: 'https://static.pdwl.net/jituan/images/mobile/digitalEmployee/join_5.png',
        },
      ],
    };
  },
  mounted() {
    this.initSwiper();
  },
  methods: {
    initSwiper() {
      new Swiper('.swiper-container', {
        autoplay: {
          delay: 3000, //时间 毫秒
          disableOnInteraction: false, //用户操作之后是否停止自动轮播默认true
        },
        // 如果需要前进后退按钮
        navigation: {
          nextEl: '.content-case-study-data-next',
          prevEl: '.content-case-study-data-prev',
        },
        slidesPerView: 1,
        spaceBetween: 30,
        centeredSlides: false,
        loop: true,
        grabCursor: true,
      });
    },
    openInfoDialog() {
      this.$router.push({name:"formPage"})
    },
  },
};
</script>
<style lang="scss" scoped>
* {
  padding: 0;
  margin: 0;
}
.digitalEmployee-mobile {
  overflow: hidden;
  &-title {
    text-align: center;
    padding: 80px 0 60px 0;
    margin: 0 40px;
    h3 {
      font-size: 46px;
      font-weight: bold;
      color: #000000;
      line-height: 50px;
    }
    h5 {
      margin-top: 40px;
      font-size: 36px;
      font-weight: bold;
      color: #000000;
      line-height: 34px;
    }
    p {
      margin-top: 40px;
      height: 18px;
      font-size: 28px;
      font-weight: 400;
      color: #666666;
      line-height: 36px;
    }
    &.dark {
      h3,
      h5,
      p {
        color: #ffffff;
      }
    }
  }
  &-banner {
    position: relative;
    &-img {
      img {
        position: relative;
        width: 100%;
        height: auto;
        display: block;
        background-color: #232531;
      }
    }
    &-info {
      width: 70%;
      position: absolute;
      left: 20px;
      top: 22%;
      z-index: 1;
      color: #ffffff;
      &-desc {
        h2 {
          font-size: 50px;
          font-weight: bold;
          line-height: 54px;
        }
        p {
          margin-top: 30px;
          span {
            display: block;
            font-size: 36px;
            line-height: 60px;
          }
        }
      }
      &-btn {
        margin-top: 50px;
      }
    }
  }
  &-ai {
    background-image: url(https://static.pdwl.net/jituan/images/mobile/digitalEmployee/ai_bg.png);
    background-size: 100% 100%;
    background-color: #232531;
    padding-bottom: 80px;
    overflow: hidden;
  }
  &-host {
    background-image: url(https://static.pdwl.net/jituan/images/mobile/digitalEmployee/host_bg.png);
    background-size: 100% 100%;
    background-color: #232531;
    padding-bottom: 80px;
    overflow: hidden;
    &-body {
      margin: 0 30px;
      &-item {
        margin: 20px 0;
        background: #f0f7ff;
        height: 140px;
        border: 1px solid #71eeff;
        border-radius: 6px;
        &-img {
          position: relative;
          justify-content: right;
          display: flex;
          height: 100%;
        }
        img {
          height: 100%;
          width: auto;
          display: block;
        }
        p {
          position: absolute;
          left: 0;
          top: 50%;
          z-index: 1;
          transform: translateY(-50%);
          font-size: 28px;
          color: #000000;
          height: 30px;
          line-height: 30px;
          width: 100%;
          padding: 0 30px;
          box-sizing: border-box;
        }
        &:nth-child(even) .digitalEmployee-mobile-host-body-item-img {
          justify-content: left;
          p {
            text-align: right;
          }
        }
      }
    }
  }
  &-marketing {
    background-image: url(https://static.pdwl.net/jituan/images/mobile/digitalEmployee/marketing_bg.png);
    background-size: 100% 100%;
    background-color: #232531;
    padding-bottom: 80px;
    overflow: hidden;
    &-body {
      margin: 20px 60px;
      &-item {
        margin: 30px 0;
        background-image: -webkit-linear-gradient(
          90deg,
          rgba(0, 111, 255, 1) 0%,
          rgba(98, 222, 166, 1) 100%
        );
        background-image: -moz-linear-gradient(
          90deg,
          rgba(0, 111, 255, 1) 0%,
          rgba(98, 222, 166, 1) 100%
        );
        background-image: linear-gradient(
          90deg,
          rgba(0, 111, 255, 1) 0%,
          rgba(98, 222, 166, 1) 100%
        );
        border-radius: 6px;
        padding: 2px;
        box-sizing: border-box;
        p {
          display: block;
          width: 100%;
          height: 100%;
          padding: 40px 10px;
          border-radius: 6px;
          font-size: 24px;
          color: #ffffff;
          line-height: 30px;
          text-align: center;
          background-color: #151e3d;
          box-sizing: border-box;
        }
      }
    }
    &-desc {
      margin: 60px 60px 20px 60px;
      img {
        width: 100%;
        height: auto;
        display: block;
      }
    }
  }
  &-helper {
    background-image: url(https://static.pdwl.net/jituan/images/mobile/digitalEmployee/helper_bg.png);
    background-size: 100% 100%;
    background-color: #232531;
    padding-bottom: 80px;
    overflow: hidden;
    &-body {
      margin: 20px 60px;
      &-item {
        margin: 30px 0;
        background-image: -webkit-linear-gradient(
          90deg,
          rgba(0, 111, 255, 1) 0%,
          rgba(98, 222, 166, 1) 100%
        );
        background-image: -moz-linear-gradient(
          90deg,
          rgba(0, 111, 255, 1) 0%,
          rgba(98, 222, 166, 1) 100%
        );
        background-image: linear-gradient(
          90deg,
          rgba(0, 111, 255, 1) 0%,
          rgba(98, 222, 166, 1) 100%
        );
        border-radius: 6px;
        padding: 2px;
        box-sizing: border-box;
        p {
          display: block;
          width: 100%;
          height: 100%;
          padding: 40px 10px;
          border-radius: 6px;
          font-size: 24px;
          color: #ffffff;
          line-height: 30px;
          text-align: center;
          background-color: #000c15;
          box-sizing: border-box;
        }
      }
    }
    &-desc {
      margin: 60px 60px 20px 60px;
      img {
        width: 100%;
        height: auto;
        display: block;
      }
    }
  }
  &-case {
    background-image: url(https://static.pdwl.net/jituan/images/mobile/digitalEmployee/case_bg.png);
    background-size: 100% 100%;
    background-color: #232531;
    padding-bottom: 80px;
    overflow: hidden;
    &-body {
      margin: 40px;
      &-item {
        display: inline-block;
        background: #f0f2f5;
        border-radius: 6px;
        background: #ffffff;
        text-align: center;
        padding: 30px;
        box-sizing: border-box;
        h4 {
          margin-top: 20px;
          font-size: 34px;
          line-height: 40px;
        }
        p {
          color: #666666;
          font-size: 28px;
          margin-top: 20px;
        }
        img {
          width: 100%;
          height: auto;
          display: block;
          margin: 0 auto;
          margin-top: 40px;
        }
        &-desc {
          word-break: break-all;
          text-align: left;
          margin-top: 40px;
          font-size: 24px;
          line-height: 36px;
        }
      }
    }
  }
  &-join {
    background-image: url(https://static.pdwl.net/jituan/images/mobile/digitalEmployee/join_bg.png);
    background-size: 100% 100%;
    background-color: #232531;
    padding-bottom: 20px;
    overflow: hidden;
    &-body {
      padding: 60px 40px;
      color: #ffffff;
      display: flex;
      &-item {
        flex: 1;
        display: flex;
        &-l {
          flex: 1;
          text-align: center;
          margin: 0 auto;
          img {
            width: auto;
            height: 80px;
            display: block;
            margin: 0 auto;
          }
          p {
            font-size: 24px;
            line-height: 28px;
            display: block;
            margin-top: 30px;
          }
        }
        &-r {
          img {
            height: 20px;
            width: auto;
            display: block;
            margin: 0 auto;
            margin-top: 30px;
          }
        }
        &:last-child {
          .channel-mobile-hhtj-step-item-l i {
            font-size: 50px;
          }
        }
      }
    }
  }
}
</style>
<style lang="scss" scoped>
.digitalEmployee-mobile {
  .vs-button {
    background: linear-gradient(90deg, #006fff 0%, #60dca7 100%);
    font-size: 24px;
    padding: 0;
    width: 200px;
    margin: 0px;
    border-radius: 8px;
  }
}
</style>
